import React from 'react';
import { Col, Row, Flex } from 'antd';
import { Image } from 'antd';
import solenValveHome from '../assets/productImg/solenValveHome.png';
import gearboxValveHome from '../assets/productImg/gearboxValveHome.png';
import electronicSwitchHome from '../assets/productImg/electronicSwitchHome.png';
import sensorHome from '../assets/productImg/sensorHome.png';
import repairKitsHome from '../assets/productImg/repairKitsHome.png';
import './less/Home.less';
const Home = () => {

    const itemClick = (label) => {
        window.sessionStorage.setItem('item', label)
        PubSub.publish('item', label)
    }
    return (
        <Flex className='productPage' justify='center' align='center'>
            <div className='pageContet'>
                <Row justify={'center'}>
                    <Col md={8} xs={24} style={{cursor:'pointer'}} onClick={()=>{itemClick('SOLENOID VALVE')}}>
                        <Flex justify='center' className='flex-home'>
                            <Flex vertical justify="center" align="center">
                                <Image preview={false} width={200} src={solenValveHome} />
                                <h1 level={2} className='solenoid-valve'>电磁阀</h1>
                                <h1 level={2} className='text-center'>SOLENOID VALVE</h1>
                            </Flex>
                        </Flex>
                    </Col>
                    <Col md={8} xs={24} style={{cursor:'pointer'}} onClick={()=>{itemClick('GEARBOX VALVE')}}>
                        <Flex justify='center' className='flex-home'>
                            <Flex vertical justify="center" align="center">
                                <Image preview={false} width={200} src={gearboxValveHome} />
                                <h1 level={2} className='gearbox-valve'>变速箱阀</h1>
                                <h1 level={2} className='text-center'>GEARBOX VALVE</h1>
                            </Flex>
                        </Flex>
                    </Col>
                </Row>
                <Row justify={'center'}>
                    <Col md={7} xs={24} style={{cursor:'pointer'}} onClick={()=>{itemClick('ELECTRONIC SWITCH')}}>
                        <Flex justify='center' className='flex-home'>
                            <Flex vertical justify="center" align="center">
                                <Image preview={false} width={200} src={electronicSwitchHome} />
                                <h1 level={2} className='gearbox-valve'>电子开关</h1>
                                <h1 level={2} className='text-center'>ELECTRONIC SWITCH</h1>
                            </Flex>
                        </Flex>
                    </Col>
                    <Col md={7} xs={24} style={{cursor:'pointer'}} onClick={()=>{itemClick('SENSOR')}}>
                        <Flex justify='center' className='flex-home'>
                            <Flex vertical justify="center" align="center">
                                <Image preview={false} width={200} src={sensorHome} />
                                <h1 level={2} className='sensor'>传感器</h1>
                                <h1 level={2} className='text-center'>SENSOR</h1>
                            </Flex>
                        </Flex>
                    </Col>
                    <Col md={7} xs={24} style={{cursor:'pointer'}} onClick={()=>{itemClick('REPAIR KITS &PRODUCT PARTS')}}>
                        <Flex justify='center' className='flex-home'>
                            <Flex vertical justify="center" align="center">
                                <Image preview={false} width={200} src={repairKitsHome} />
                                <h1 level={2} className='sensor'>修理配件包</h1>
                                <h1 level={2} className='text-center'>REPAIR KITS &PRODUCT PARTS</h1>
                            </Flex>
                        </Flex>
                    </Col>
                </Row>
            </div>
        </Flex>
    );
};

export default Home;